<template>
    <div>
        <div class="fillcontain" v-if="strageyIsShow">

            <div class="bus_b">

            <h2 class="title">策略管理</h2>

            </div>


            <div class="table_container">
                <div class="tab_search clearfix">
                    <div class="fl">
                        <div class="search_inp el-input">
                            <input type="text" autocomplete="off" placeholder="请输入关键词查询" class="el-input__inner">
                        </div> 
                        <button type="button" class="el-button el-button--primary">
                            <i class="search"></i>
                            <span>搜索</span>
                        </button>
                    </div> 
                    <div class="fr">
                        <el-button type="primary" icon="el-icon-plus" @click="addStragey()" size="small">添加策略</el-button>
                    </div>
                </div>
                    <el-table
                        :data="tableData"
                        size="small"
                        style="width: 100%">
                        <el-table-column
                            prop="id"
                            label="策略名称"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="设备类型"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="mode"
                            label="策略类型">
                        </el-table-column>
                        <el-table-column
                            prop="alarmStatus"
                            label="开始时间">
                        </el-table-column>
                        <el-table-column
                            prop="alarmStatus"
                            label="结束时间">
                        </el-table-column>
                        <el-table-column
                            label="启用">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="isEnable"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="text" @click="viewStragey()">查看</el-button>
                                <el-button size="small" type="text" @click="updateStragey()">修改</el-button>
                                <el-button size="small" type="text" @click="delStragey()">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="Pagination">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>

            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //当前页
      count: 10, //总记录数
      isEnable: true, //是否启用
      strageyIsShow: true,
      tableData: [
        {
          id: "",
          name: "",
          mode: "",
          alarmStatus: "",
          onlineStatus: "",
          onStatus: "",
          mac: ""
        }
      ]
    };
  },
  mounted() {
      if(this.$route.path == '/electricBoxManage/strategyManage') {
          this.strageyIsShow = true
      } else {
          this.strageyIsShow = false
      }
  },
  watch:{
    $route(to,from){
       
        if(to.path == '/electricBoxManage/strategyManage') {
            this.strageyIsShow = true
        } else if(to.path == '/electricBoxManage/strategyManage/addStragey' || to.path == '/electricBoxManage/strategyManage/updatestragey' ||  to.path == '/electricBoxManage/strategyManage/viewstragey'){
            this.strageyIsShow = false
        }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleCommand(command) {
        console.log(command)
    },
    addStragey() {
        this.$router.push({
            path: '/electricBoxManage/strategyManage/addStragey'
        })
    },
    updateStragey(){
        this.$router.push({
            path: '/electricBoxManage/strategyManage/updatestragey'
        })
    },
    viewStragey() {
        this.$router.push({
             path: '/electricBoxManage/strategyManage/viewstragey'
        })
    },
    delStragey() {
        this.$confirm('确定要删除策略吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {});
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

